<template>
	<div :class="[classes.dirWrap, 'colorBgContainer', 'borderRadius']">
		<a-tabs v-model:activeKey="curTab">
			<template #extra>
				<a-button type="primary" size="mini" @click="generateOutlineView">大纲导图</a-button>
			</template>
			<a-tab-pane v-for="item in curTabData" :key="item.key" :title="item.label">
				<a-scrollbar v-if="treeData.length > 0" style="width: 220px; max-height: 300px; overflow: auto">
					<MapTreeToDom :dir="treeData" />
				</a-scrollbar>
				<Empty v-else :text="'暂无大纲'" :height="80" />
			</a-tab-pane>
		</a-tabs>
		<a-modal v-model:visible="showModal" title="大纲视图" :width="660" title-align="start" okText="确认" cancelText="取消" @ok="handleOk" @cancel="handleOk">
			<div ref="mindDomRef" style="width: 100%; min-height: 500px" class="mind"></div>
		</a-modal>
	</div>
</template>

<script setup lang="ts">
import Mind from "@/plugins/mind"
import classes from "./index.module.less"
import MapTreeToDom from "./mapTreeToDom.vue"
import { getHeadTree, convertStructureRecursive } from "./tool"

export interface IDirType {
	dir: any
	isPreview?: boolean
}
const props = defineProps<IDirType>()
const showModal = ref(false)
const mindDomRef = ref()
const mindRef = ref()
const treeData = computed(() => {
	return getHeadTree(props.dir)
})
const curTab = ref<string>("outline")

const curTabData = ref([
	{
		key: "outline",
		label: "大纲",
	},
])
const handleOk = () => {
	showModal.value = false
}
const generateOutlineView = () => {
	const mindData = convertStructureRecursive(treeData.value)
	showModal.value = true
	setTimeout(() => {
		if (mindRef.value) {
			mindRef.value.setData(mindData)
			return
		}
		mindRef.value = new Mind({
			// @ts-ignore
			el: mindDomRef.value,
			enableFreeDrag: true,
			// @ts-ignore
			initRootNodePosition: mindData && mindData.children.length > 1 ? ["left", "center"] : ["center"],
			data: mindData,
		})
	}, 200)
}
</script>

<style scoped lang="less">
.mind {
	svg {
		width: 100%;
		height: 100%;
	}
}
</style>

